require(['./config'], () => {
    require(['swiper','template','header','footer','bootstrap'],(Swiper, template) => {
        class Index{
            constructor(){
                // console.log($)
                this.banner()
                this.getCategory()
                this.getTypeData()
                
            }
            banner () {
                var mySwiper = new Swiper('.swiper-container', {
                    loop: true, // 循环模式选项
                    speed: 1000,
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
        
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false
                    },
        
                   })
           
            }
            // tab () {
            //     $('#myTabs a').click(function (e) {
            //         e.preventDefault()
            //         $(this).tab('show')
            //       })
            // }
            getCategory () {
                //获取分类的数据，渲染分类列表
                //颗粒度
                // $.get是juqery 请求 然后它的回调是请求返回的后端响应数据
                $.get('/libs/json/homeCategory.json', resp => {
                    // 获取 定义的模板 ，返回值是一个字符串 
                    // 这里使用模板引擎，他会去 当前页面 去查找id = cateTemplate 的这个标签，并且把第i二个参数对象传过去，
                    // 然后 在当前页面的script标签里面可以使用这个数据了  ，然后在返回一个字符串，你就可以将这个字符串 html进 你的页面
                    // ok？有点不OK。。。哪里？是template后面参数就这样用？嗯  你看我给你在操作一下
                    // var html = template('cateTemplate', { list: data})
                    var html = template('cateTemplate', { list:resp})
                    $('#menu-bottom').html(html)

                })
            }
            getTypeData () { 
                $.get('http://rap2api.taobao.org/app/mock/241531/typeList', resp => {
                    
                    if(resp.code === 200) {
                        const { list } = resp.body
                        this.renderType(list)
                    }
                })

            }
            renderType (list) {
                $('#newProductList').html(template('typeTemplate', { list }))
                
            }
        }
        new Index()
    })
})